<template>
  <div class="invite-code-input" :class="{'slide-out-top':isLeft}">
    <div class="invite-title">欢迎加入，填写邀请码</div>
    <u-message-input mode="bottomLine" @finish="finish"/>

    <div class="no-invite-tip">个人时间有限，没有时间监管博客内容，暂不开放获取邀请码，谢谢！</div>
    <!-- <div class="no-invite-tip">没有邀请码？可邮件1026946613@qq.com申请！</div> -->
  </div>
</template>

<script>
import UMessageInput from '@/components/UMessageInput.vue'
import Api from "@/utils/api.js";

export default {

  data(){
    return {
      value:'',
      title:``,
      isInit: false,
      isLeft: false,
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.isInit = true;
    })
  },

  components:{
    UMessageInput
  },

	methods: {
    finish(value) {
      this.$axios.post(Api.INVITE_CHECK, {inviteCode: value}).then( res =>{
        this.$emit('finish', value);
        this.isLeft = true;
      }).catch(res =>{
        // 提示失败
        this.$message.warning(res.message);
        this.value = ""
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';
.invite-code-input{
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  .flex-center-center();
  flex-direction: column;
  background-color: #f6f6f6;

  .invite-title{
    position: absolute;
    top: 10vh;
    color: #000;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: bold;
  }

  .no-invite-tip{
    position: absolute;
    bottom: 40px;
    // color: #c1c1c1;
    color: #666666;
    font-size: 12px;
    letter-spacing: 1px;
  }
}

// 离开动画
// https://animista.net/play/exits/scale-out/scale-out-hor-left
.slide-out-top {
	animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}

@media screen and (max-width: 1023px) {
  .invite-code-input{
    .invite-title{
      top: 25vh;
      font-size: 18px;
    }
  }
}
</style>